﻿
@{
    ViewBag.Title = "InBox";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Assets/js/pages/mailbox.js")"></script>
<div class="page-header">
    <div class="pull-left">
        <ol class="breadcrumb visible-sm visible-md visible-lg">
            <li><a href="index.html"><i class="icon fa fa-home"></i>Home</a></li>
            <li  class="active"><a href="#"><i class="fa fa-envelope"></i>Mail</a></li>
        </ol>
    </div>
    <div class="pull-right">
        <h2>收件箱</h2>
    </div>
</div>
<div class="row mailbox">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <div class="panel">
            <div class="panel-body bk-bg-very-light-gray mailbox-menu">
                <a href="page-inbox-compose.html" class="btn btn-primary btn-block">Compose</a>
                <ul>
                    <li>
                        <a href="page-inbox.html">发件箱<span class="label label-primary">165</span></a>
                    </li>
                    <li>
                        <a href="page-inbox.html">收件箱<span class="label label-dark">9</span></a>
                    </li>
                    <li>
                        <a href="page-inbox-compose.html#">发送邮件</a>
                    </li>
                    <li>
                        <a href="page-inbox-compose.html#">收藏夹<span class="label label-info">7</span></a>
                    </li>
                    <li>
                        <a href="page-inbox-compose.html#">草稿箱<span class="label label-warning">3</span></a>
                    </li>
                    <li>
                        <a href="page-inbox-compose.html#">垃圾箱</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--使用局部试图 收件箱/发件箱/邮件详情 -->

    <div class="col-lg-9 col-md-8 col-sm-8 col-xs-12">
        <div class="panel bk-bg-white">
            <div class="panel-body mailbox-btn-action">
                <div class="col-sm-8 col-xs-12 bk-padding-5 text-center">
                    <span class="item-action-group">
                        <a class="item-action fa fa-envelope" href="#"></a>
                        <a class="item-action fa fa-star" href="#"></a>
                        <a class="item-action fa fa-star-o" href="#"></a>
                        <a class="item-action fa fa-bookmark-o" href="#"></a>
                    </span>
                    <span class="item-action-group">
                        <a class="item-action fa fa-mail-reply" href="#"></a>
                        <a class="item-action fa fa-mail-reply-all" href="#"></a>
                        <a class="item-action fa fa-mail-forward" href="#"></a>
                    </span>
                    <span class="item-action-group">
                        <a class="item-action fa fa-trash-o" href="#"></a>
                        <a class="item-action fa fa-refresh" href="#"></a>
                        <a class="item-action fa fa-tags" href="#"></a>
                    </span>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="search bk-padding-5">
                        <div class="input-group input-search">
                            <input class="form-control" name="q" id="q" placeholder="Search..." type="text">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel bk-bg-white">
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="btn-group bk-margin-bottom-10 bk-margin-top-10 pull-right">
                        <button class="btn btn-sm btn-default">1-10 of 500</button>
                        <button class="btn btn-sm btn-default"><span class="fa fa-chevron-left"></span></button>
                        <button class="btn btn-sm btn-default"><span class="fa fa-chevron-right"></span></button>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="col-md-12">
                    <ul class="messages-list">
                        <li class="unread">
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date"><i class="fa fa-paperclip"></i> Today, 08:45 AM</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date"><span class="fa fa-paper-clip"></span> Today, 07:53 AM</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date"><i class="fa fa-paperclip"></i> Today, 07:49 AM</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                        <li class="unread">
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date">Yesterday, 02:58 PM</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                        <li class="unread">
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date">Yesterday, 01:20 PM</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date"><i class="fa fa-paperclip"></i> Yesterday, 11:57 AM</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                        <li class="unread">
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date">Yesterday, 10:05 AM</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date">1 Week ago</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date">3 Week ago</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="page-inbox-message.html">
                                <div class="header">
                                    <span class="checkbox-custom">
                                        <input id="mailInbox" type="checkbox">
                                        <label for="mailInbox"></label>
                                    </span>
                                    <span class="from">Jhon Smith</span>
                                    <span class="date">4 Week ago</span>
                                </div>
                                <div class="title">
                                    <span class="action"><i class="fa fa-star"></i></span>
                                    Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </div>
                                <div class="description">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua......
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--使用局部试图-->
</div>